import { useUnit } from 'effector-react';

import Alert from 'components/Alert';
import { $hubInfo, Port } from 'store';

const HubInfo = () => {
  const hubInfo = useUnit($hubInfo);

  if (!hubInfo) {
    return <Alert warning caption="Хаб не подключен" />;
  }

  return (
    <div className="mockup-browser border bg-base-300">
      <div className="mockup-browser-toolbar">
        <div className="input">Сведения о подключении к хабу</div>
      </div>
      <div className="flex justify-center px-4 py-16 bg-base-200">
        <ul>
          {(Object.keys(hubInfo) as (keyof Port)[]).map(
            (attr, hubAttrIndex) => (
              <li key={hubAttrIndex}>
                {attr}: {hubInfo[attr]}
              </li>
            )
          )}
        </ul>
      </div>
    </div>
  );
};

export default HubInfo;
